<template>
	<div class="com-container">
		<div class="com-chart" ref='stock_ref'></div>
<!-- 		<span class="iconfont arr-left" >&#xe6ef;</span>
		<span class="iconfont arr-right" >&#xe6ed;</span>
 -->	</div>
</template>

<script>
	export default {
		data() {
			return {
				//实例对象
				chartInstance: null,
				// 服务器返回的数据，数组格式
				resData: null,
				// 当前页
				currentIndex: 0,
				oneWeight: 0,
				timerId: null
			}
		},
		computed:{
			theme(){
				 return this.$store.state.theme;
			}
		},
		watch:{
			theme(){
				//销毁当前图表
				this.chartInstance.dispose();
				//重新以最新主题初始化图表
				this.initChart();
				//完成适配
				this.screenAdapter();
				//更新图表展示
				this.updataChart();			
			}
		},
		created(){
			//组件创建完成后进行回调函数的注册
			this.$socket.registerCallBack('stockData',this.getData)		
		},	
		mounted() {
			this.initChart();
			//this.getData();
			this.$socket.send({
				action: 'getData',
				socketType: 'stockData',
				chartName: 'stock',
				value: ''
			})
			this.screenAdapter();
			window.addEventListener("resize", this.screenAdapter);
		},
		destroyed() {
			window.removeEventListener("resize", this.screenAdapter);
			clearInterval(this.timerId);
			this.$socket.unRegisterCallBack('stockData');
			
		},
		methods: {
			//初始化echart实例对象
			initChart() {

				this.chartInstance = this.$echarts.init(this.$refs.stock_ref,this.$store.state.theme);
				//对图表初始化配置的控制
				const initOption = {
					title: {
						text: '▎库存和销量分析',
						  left: 20,
						  top: 20
						
					},
				};
				this.chartInstance.setOption(initOption);
				this.chartInstance.on('mouseover', () => {
				    clearInterval(this.timerId)
				  })
				  this.chartInstance.on('mouseout', () => {
				    this.startInterval()
				  })
				
			},
			//获取服务器数据
			getData(ret) {
				//this.$axios.get('stock').then(res => {
				//	console.log(res.data);
				//	this.resData = res.data;
				// 	this.updataChart();
				// 	this.startInterval();
				// })
					this.resData = ret;
				 	this.updataChart();
				 	this.startInterval();
			},
			//更新图表			
			updataChart() {
				const centerArr = [
					['18%', '40%'],
					['50%', '40%'],
					['82%', '40%'],
					['34%', '75%'],
					['66%', '75%']
				]
				const colorArr = [
				  ['#4FF778', '#0BA82C'],
				  ['#E5DD45', '#E8B11C'],
				  ['#E8821C', '#E55445'],
				  ['#5052EE', '#AB6EE5'],
				  ['#23E5E5', '#2E72BF']
				]
			 const start = this.currentIndex * 5
			 const end = (this.currentIndex + 1) * 5
			 const showData = this.resData.slice(start, end)
      const seriesArr = showData.map((item, index) => {
        return {
          type: 'pie',
					//radius:[100,110],
          center: centerArr[index],
					// 关闭鼠标移入到饼图时的动画效果
					hoverAnimation: false, 
					// 隐藏指示线
					labelLine: {
					  show: false 
					},
					label: {
					  position: 'center',
					  color: colorArr[index][0]
					},
          data: [
            {
							name: item.name + '\n\n' + item.sales,
              value: item.sales,
							itemStyle: {
							  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
							    {
							      offset: 0,
							      color: colorArr[index][0]
							    },
							    {
							      offset: 1,
							      color: colorArr[index][1]
							    }
							  ])
							}
            },
            {
              value: item.stock,
							itemStyle: {
							  color: '#333843'
							}
            }
          ]
        }
      })
				const dataOption = {
					series: seriesArr
				}
				this.chartInstance.setOption(dataOption);
			},
			//echarts实例屏幕的适配
			screenAdapter() {
				const oneWeight = this.$refs.stock_ref.offsetWidth / 100;
				const innerRadius = oneWeight * 9.5
				const outterRadius = oneWeight * 10.8
				//跟屏幕大小有关的配置
				const adapterOption = {
					title: {
					  textStyle: {
					    fontSize: oneWeight * 4
					  }
					},
				series: [
				  {
				    type: 'pie',
				    radius: [outterRadius, innerRadius],
				    label: {
				      fontSize: oneWeight * 2.5
				    }
				  },
				  {
				    type: 'pie',
				    radius: [outterRadius, innerRadius],
				    label: {
				      fontSize: oneWeight * 2.5
				    }
				  },
				  {
				    type: 'pie',
				    radius: [outterRadius, innerRadius],
				    label: {
				      fontSize: oneWeight * 2.5
				    }
				  },
				  {
				    type: 'pie',
				    radius: [outterRadius, innerRadius],
				    label: {
				      fontSize: oneWeight * 2.5
				    }
				  },
				  {
				    type: 'pie',
				    radius: [outterRadius, innerRadius],
				    label: {
				      fontSize: oneWeight * 2.5
				    }
				  }
				]	
				};
				this.chartInstance.setOption(adapterOption);
				this.chartInstance.resize();

			},
			startInterval () {
			  if (this.timerId) {
			    clearInterval(this.timerId)
			  }
			  this.timerId = setInterval(() => {
			    this.currentIndex++;
			    if (this.currentIndex > 1) {
			      this.currentIndex = 0
			    }
					// 在更改完currentIndex之后 , 需要更新界面
			    this.updataChart(); 
			  }, 3000)
			}
		}
	}
</script>


<style scoped>

</style>
